Hi I’m explaining bootstrap component like grid and image classes

Grid System

As you may know, in graphics design, a Grid system is a two dimensional structure made up of horizontal and vertical axes having intersecting areas, useful for structuring content. It is widely used to design layout and content structure in print design.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Bootstrap Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works.

Bootstrap having 12 columns Bootstrap having 4 type columns.

• Extra small device (<768px) Phones:-  syntax (.col-xs-2)
• Small devices (>=768px) Tablets:-  syntax (.col-sm-2)
• Medium Devices (>=992px) Desktop:-  syntax (.col-md-2)
• Large Devices (>=1200px) Desktop:-  syntax (.col-lg-2)
• Rows must be placed within a .container class for proper alignment and padding.Columns must be placed within a .row class.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns.

Example

<div class="container">
    <div class="row">
        <div class="col-md-4 well">
            4
        </div>
        <div class="col-md-4 well">
            4
        </div>
        <div class="col-md-4 well">
            4
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 well">
            2
        </div>
        <div class="col-md-2 well">
            2
        </div>
        <div class="col-md-2 well">
            2
        </div>
        <div class="col-md-2 well">
            2
        </div>
        <div class="col-md-2 well">
            2
        </div>
        <div class="col-md-2 well">
            2
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 well">
            3
        </div>
        <div class="col-md-3 well">
            3
        </div>
        <div class="col-md-3 well">
            3
        </div>
         <div class="col-md-3 well">
            3
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 well">
            6
        </div>
        <div class="col-md-6 well">
            6
        </div>
    </div>
    <div class="row">
        <div class="col-md-5 well">
            5
        </div>
        <div class="col-md-7 well">
            7
        </div>
    </div>
</div>

Result:

Example Offset:

<div class="container">
    <div class="row">
        <div class="col-md-4 well">
            4
        </div>
        <div class="col-md-4 col-md-offset-4 well">
            4
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-4 well">
            2
        </div>
        <div class="col-md-2 col-md-offset-4 well">
            2
        </div>
        <div class="col-md-2 well">
            2
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 well">
            3
        </div>
       
        <div class="col-md-3 col-md-offset-3 well">
            3
        </div>
         <div class="col-md-3 well">
            3
        </div>
    </div>
</div>

Result:

Images

In this topic I will explaining how to make image more attractive. So make easier

these task bootstrap provide some classes.

Example

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h4 class="text-primary">Image without use bootstrap class</h4>
            <img src="~/Content/img/discovery.jpg" />
        </div>
        <div class="col-md-6">
            <h4 class="text-primary">Image after use bootstrap class</h4>
            <img src="~/Content/img/discovery.jpg" class="img-rounded" />
        </div>
    </div>
</div>

Result Image Rounded:

Result Image Circle:

<img src="~/Content/img/discovery.jpg" class="img-circle" />